<template>
  <div>
    <div ref="homeOvertimeRef" style="height: 350px;width:100%"></div>
  </div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, getCurrentInstance,onUnmounted } from 'vue';
import * as echarts from 'echarts';
export default {
  name: 'diagram',
  setup() {
    const { proxy } = getCurrentInstance() as any;
		const state = reactive({

    });
    // 健康报
		const initHomeOvertime = () => {
			const myChart = echarts.init(proxy.$refs.homeOvertimeRef);
			const option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
									type: 'cross',
									crossStyle: {
											color: '#999'
									}
							}
						},
						toolbox: {
							feature: {
								dataView: {show: true,title: '数据视图', readOnly: false},
									magicType: {show: true, type: ['line', 'bar']},
									restore: {show: true,title:"还原",},
									saveAsImage: {show: true,title:"保存为图片",}
								}
						},
						legend: {
								data: [ '考勤率/%']
						},
						xAxis: [
								{
										type: 'category',
										data: ['3-1', '3-2', '3-3', '3-4', '3-5', '3-6', '3-7', '3-8', '3-9', '3-10', '3-11', '3-12', '3-13', '3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20', '3-21', '3-22', '3-23', '3-24', '3-25', '3-26', '3-27', '3-28', '3-29', '3-30', '3-31'],
										axisPointer: {
												type: 'shadow'
										}
								}
						],
						yAxis: [
								{
										type: 'value',
										name: '',
										min: 0,
										max: 110,
										interval: 10,
										axisLabel: {
												formatter: '{value} %'
										}
								}
						],
						series: [{
										name: '考勤率/%',
										type: 'line',
										data: [98, 95, 98, 100, 100, 100, 100, 89, 95, 92, 100, 100,98, 95, 98, 100, 100, 100, 100, 89, 95, 92, 100,95, 92, 100, 100,98, 95, 98, 99]
						}]
				};
			myChart.setOption(option);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		};

		// 页面加载前
		onMounted(() => {
			initHomeOvertime();
		});


    return{
      ...toRefs(state),
    };
  },
  data () {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
</style>
